<template>
	<div>
		<header class="header">
			<a-form class="formList" layout="inline">
				<a-form-item label="状态">
					<a-select v-model:value="queryParams.status">
						<a-select-option value="">全部状态</a-select-option>
						<a-select-option value="0">待审核</a-select-option>
						<a-select-option value="1">已通过</a-select-option>
						<a-select-option value="2">审核未通过</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="分类">
					<a-select v-model:value="queryParams.category_id" placeholder="文章类别">
						<a-select-option value="">全部分类</a-select-option>
						<a-select-option v-for="(item,index) in classfiyData" :key="index" :value="item.id">
							<span style="margin-left:25px" v-if="item.subclass">
								--{{ item.title }}
							</span>
							<span v-else>
								{{ item.title }}
							</span>
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="资源名称">
					<a-input v-model:value="queryParams.ziyuan_title"></a-input>
				</a-form-item>
				<a-form-item label="用户名">
					<a-input v-model:value="queryParams.user_name"></a-input>
				</a-form-item>
				<a-form-item>
					<a-button type="danger" @click="serchButton">查询</a-button>
				</a-form-item>
			</a-form>
		</header>
		<!--表格操作项目-->
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>Id</th>
					<th>资源名称</th>
					<th>类别</th>
					<th>发布用户</th>
					<th>售价【折扣】</th>
					<th>更新时间</th>
					<th style="width: 70px;">状态</th>
					<th style="width: 145px;">操作</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item,index) in allResourcesData" :key="index">
					<td>{{ item.id }}</td>
					<td>{{ item.title }}</td>
					<td>{{ item.category_title }}</td>
					<td>{{ item.user_nickname }}</td>
					<td>
						<span v-if="item.price > 0">{{item.price}}</span>
						<span v-else style="color: #66CC00;">免费</span>
						<span v-if="item.vip_dis < 1 && item.vip_dis > 0" style="color: #ff6600;">【{{item.vip_dis*10}}折】</span>
						<span v-if="item.vip_dis == 0" style="color: #ff6600;">【VIP免费】</span>
					</td>
					<td>{{ item.ziyuan_update_time }}</td>
					<td>
						<span v-show="item.status == 0" style="color: #ff6600;">
							待审核
						</span>
						<span v-show="item.status == 1" style="color: #66CC00;">
							已通过
						</span>
						<span v-show="item.status == 2" style="color: #ff0000;" :title="'['+item.audit_time+'] '+item.fail_reason">
							未通过
						</span>
						<span v-show="item.status == 3" style="color: #666666;">
							草稿箱
						</span>
						<span v-show="item.status == 4" style="color: #ff6600;">
							下架
						</span>
					</td>
					<td class="text-align">
						<a-button type="primary" size="small" danger @click="resourceAudit(item)">审核</a-button>
						<a-button type="primary" size="small" style="margin: 0 5px 5px;" ghost @click="openInfo(item.id)">详情</a-button>
						<a-button type="primary" size="small" class="m-l-10" @click="preview(item.id)">
						    <template #icon><SearchOutlined /></template>预览
						</a-button>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- 资源审核弹窗 -->
		<a-drawer title="资源审核" placement="right" :closable="false" width="550" :visible="visible" @close="onClose">
			<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
				<a-form-item label="审核状态">
					<a-radio-group v-model="auditParams.status" @change="onChange">
						<a-radio value="2">未通过</a-radio>
						<a-radio value="1">通过</a-radio>
					</a-radio-group>
					<!--审核未通过理由-->
					<div style="margin-top: 20px" v-show="textareas">
						<span style="color: #CC3300">未通过理由:</span>
						<textarea v-model="auditParams.fail_reason" cols="60" rows="5"></textarea>
					</div>
				</a-form-item>
				<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
					<a-button type="primary" @click="sureSubmit">确定</a-button>
					<a-button class="m-l-10" @click="visible=false">取消</a-button>
				</a-form-item>
			</a-form>
		</a-drawer>
		<!-- 分页 -->
		<div class="padding-t-20">
			<a-pagination :pageSize="pageSize" :current="page" :total="count" @change="clickPage" :pageSizeOptions="pageSizeOptions" show-size-changer @showSizeChange="onShowSizeChange" show-quick-jumper />
		</div>
		
		<!-- 资源详情 -->
		<a-drawer
		    title="资源详情"
		    placement="right"
		    :visible="infoVisible"
		    @close="closeInfo"
			width="500"
		  >
		    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
		    	<a-form-item label="审核状态">
					<!-- 0待审核 1审核通过 2审核未通过 3草稿箱 4下架 -->
		    		<a-tag v-if="ziyuanInfo.status==0" color="warning">待审核</a-tag>
		    		<a-tag v-else-if="ziyuanInfo.status==1" color="success">审核通过</a-tag>
		    		<a-tag v-else-if="ziyuanInfo.status==2" color="error">审核未通过</a-tag>
		    		<a-tag v-else-if="ziyuanInfo.status==3" color="default">草稿箱</a-tag>
		    		<a-tag v-else-if="ziyuanInfo.status==4" color="orange">下架</a-tag>
		    		<a-tag v-else color="#f50">未知状态</a-tag>
		    	</a-form-item>
				<a-form-item label="上传用户">
					{{ziyuanInfo.user_name}}
				</a-form-item>
				<a-form-item label="封面">
					<img :src="ziyuanInfo.cover[0]" alt="" style="width: 30px;height: 30px;" />
				</a-form-item>
		    	<a-form-item label="资源名称">
		    		{{ziyuanInfo.title}}
		    	</a-form-item>
		    	<a-form-item label="类别">
		    		{{ziyuanInfo.category_name}}
		    	</a-form-item>
				<a-form-item label="售价">
					<span v-if="ziyuanInfo.price > 0" style="color: #ff0000;">￥ {{ziyuanInfo.price}}</span>
					<a-tag v-else color="#87d068">免费</a-tag>
				</a-form-item>
				<a-form-item label="折扣">
					<span v-if="ziyuanInfo.vip_dis > 0 && ziyuanInfo.vip_dis < 1" style="color: #ff0000;">{{ziyuanInfo.vip_dis*10}}折</span>
					<a-tag v-else-if="ziyuanInfo.vip_dis == 0" color="pink">VIP免费</a-tag>
					<a-tag v-else>{{ziyuanInfo.vip_dis}}</a-tag>
				</a-form-item>
				<a-form-item v-if="ziyuanInfo.demo_url" label="演示地址">
					<a :href="ziyuanInfo.demo_url" target="_blank">{{ziyuanInfo.demo_url}}</a>
				</a-form-item>
				<a-form-item v-if="ziyuanInfo.download_url" label="下载地址">
					<a :href="ziyuanInfo.download_url" target="_blank">{{ziyuanInfo.download_url}}</a>
				</a-form-item>
				<a-form-item v-if="ziyuanInfo.extract" label="提取/解压密码">
					{{ziyuanInfo.extract}}
				</a-form-item>
		    	<a-form-item label="收藏量">
		    		{{ziyuanInfo.collect_num}}
		    	</a-form-item>
				<a-form-item label="下载量">
					{{ziyuanInfo.download_num}}
				</a-form-item>
				<a-form-item label="举报次数">
					{{ziyuanInfo.report_num}}
				</a-form-item>
				<a-form-item label="阅读数">
					{{ziyuanInfo.read_num}}
				</a-form-item>
				<a-form-item label="点赞数">
					{{ziyuanInfo.praise_num}}
				</a-form-item>
				<a-form-item label="仅自己可见">
					<span v-if="ziyuanInfo.self_visible == 1">是</span>
					<span v-else>否</span>
				</a-form-item>
				<a-form-item v-if="ziyuanInfo.kami" label="卡密">
					{{ziyuanInfo.kami}}
				</a-form-item>
				<a-form-item v-if="ziyuanInfo.fail_reason" label="审核失败原因">
					{{ziyuanInfo.fail_reason}}
				</a-form-item>
		    	<a-form-item label="上传时间">
		    		{{ziyuanInfo.create_time}}
		    	</a-form-item>
		    	<a-form-item label="更新时间">
		    		{{ziyuanInfo.update_time}}
		    	</a-form-item>
		    	<a-form-item v-if="ziyuanInfo.audit_time" label="审核时间">
		    		{{ziyuanInfo.audit_time}}
		    	</a-form-item>
			</a-form>
		</a-drawer>
	</div>
</template>

<script>
	import apiResource from '../../api/resource.js'

	export default {
		data() {
			return {
				textareas: false,
				// 获取分类
				classfiyData: '',
				// 所有数据
				allResourcesData: [],
				// 审核资源数据
				visible: false,
				ziyuan: {},
				queryParams: {
					ziyuan_title: '',
					category_id: '',
					user_name: '',
					status: ''
				},
				
				auditParams:{
					id: '',
					user_id: '',
					status: '',
					fail_reason: ''
				},
				
				ziyuanInfo:'',
				infoVisible: false,
				
				count: 0,
				page: 1,
				pageSize: 20,
				// 分页
				pageSizeOptions: ['20', '50', '100', '150'],
			}
		},
		mounted() {
			this.allResources();
			this.ResourcesData();
		},
		methods: {
			// 获取分类数据
			ResourcesData() {
				apiResource.getZiyuanCategorys(true).then((res) => {
					this.classfiyData = res.result
				})
			},
			allResources() {
				this.serchButton()
			},
			resourceAudit(item) {
				this.auditParams.id = item.id;
				this.auditParams.user_id = item.user_id;
				this.visible = true
			},
			onClose() {
				this.visible = false;
			},
			
			// 资源详情
			openInfo(ziyuan_id){
				apiResource.getZiyuanInfo(ziyuan_id, true).then(res => {
					if(res.status == 1){
						this.ziyuanInfo = res.result
						this.infoVisible = true
					}
				})
			},
			// 关闭资源详情
			closeInfo(){
				this.infoVisible = false
			},
			
			// 审核是否通过
			onChange(e) {
				this.auditParams.status = e.target.value
				if (e.target.value == 2) {
					this.textareas = true;
				} else {
					this.textareas = false;
				}
			},
			// 审核确定
			sureSubmit() {
				apiResource.postZiyuanAudit(this.auditParams).then((res) => {
					if (res.status == 1) {
						this.$message.success(res.message);
						this.visible = false;
						this.allResources()
					}
				})
			},
			// 分页
			clickPage(e) {
				this.page = e;
				this.allResources();
			},
			onShowSizeChange(current, pageSize) {
				this.pageSize = pageSize;
				this.page = 1;
				this.allResources();
			},
			// 获取查询接口
			serchButton() {
				apiResource.getZiYuanData(
					this.page,
					this.pageSize,
					this.queryParams.status,
					this.queryParams.category_id,
					this.queryParams.ziyuan_title,
					this.queryParams.user_name
				).then((res) => {
					if (res.status == 1) {
						this.allResourcesData = res.result.data;
						this.count = res.result.count;
					}
				})
			},
			// 预览
			preview(ziyuan_id){
				window.open('/ziyuan/preview?ziyuan_id='+ziyuan_id)
			}
		}
	}
</script>

<style scoped>
	:deep(.ant-form-item .ant-select,
	.ant-form-item .ant-cascader-picker) {
		/* width: 100%; */
		width: 188px;
	}
</style>
